<template>
  <a-drawer v-model:open="isOpen" placement="right" :width="width" :mask-style="{ opacity: 0.1 }" :mask-closable="false" :destroy-on-close="true">
    <div class="drawer-close" @click="close"></div>
    <div v-if="isLoadingInner" class="drawer-content-loading">
      <a-spin :tip="innerLoadingTip" />
    </div>
    <template v-else>
      <slot />
    </template>
  </a-drawer>
</template>
<script lang="ts" setup>
  import { watch, ref, withDefaults } from "vue"
  import { useModalEvent } from "./use-modal-event"
  import type { modalInstance } from "./instance"
  const props = withDefaults(defineProps<modalInstance>(), {
    width: "70%",
    innerLoadingTip: "加载中...",
  })
  const emits = defineEmits(["update:open", "cancel"])
  // hook
  const { isLoadingInner, useInnerLoading } = useModalEvent({ props })
  // ref
  const isOpen = ref(false)

  const close = () => {
    isOpen.value = false
    emits("update:open", false)
    emits("cancel")
  }

  watch(
    () => props.open,
    (val) => {
      isOpen.value = val
      if (val) {
        useInnerLoading()
      }
    }
  )
</script>
<style lang="scss" scoped>
  .drawer-content-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    height: 100%;
  }
  .drawer-close {
    position: absolute;
    left: -28px;
    top: 80px;
    width: 28px;
    height: 40px;
    background: var(--n-primary);
    border-radius: 2px 0px 0px 2px;
    cursor: pointer;
    transition: var(--n-transition);
    &:hover {
      background-color: var(--n-primary-hover);
    }
  }
</style>
